<template>
  <div class="login">
    <!-- 导航栏  -->
      <van-nav-bar  title="黑马头条-登陆" />
      <!-- 输入框  -->
<!-- 输入手机号，调起手机号键盘 -->
      <van-field :error-message="mobile_error" v-model.trim="mobile" type="tel" label="手机号" placeholder="请输入手机号"/>
<!-- 输入密码 -->
      <van-field :error-message='code_error' v-model.trim="code" type="password" label="密码"  placeholder="请输入密码" />
      <!-- 按钮 -->
      <div class='btn-wrap'>
      <van-button type="info" @click="click_btn" class="btn">登录</van-button>
      </div>
    </div>
</template>
<script>
// 导入 登录接口
import { login } from "@/api/user"
export default {
  name: 'Login',
  data () {
    return {
      mobile: '13911111111',
      code: '246810',
      mobile_error: '',
      code_error: ''
    }
  },

  methods: {

    // 校验文本输入不得为空
    validate () {
      if (this.mobile === "") {
        this.mobile_error = "请输入手机号"
        return false
      } else {
        this.mobile_error = ""
      }
      if (this.code === "") {
        this.code_error = "请输入密码"
        return false
      } else {
        this.code_error = ""
      }
      return true
    },
    async click_btn () {
      // 验证是否通过校验
      if (!this.validate()) {
        alert("验证未通过")
        return
      }
      //  加载提示
      this.$toast.loading({
        duration: 0, // 持续展示 toast, 永远不会关闭
        mask: true, // 整体添加一个遮罩
        message: "加载中..."
      })

      try {
        // 登录传参
        const result = await login(this.mobile, this.code)
        this.$toast.success("登录成功")
        this.$router.push('/layout')
        this.$store.commit('mSetTokenInfo', result.data.data)
      } catch (err) {
        this.$toast.fail('登录失败');
      }
    }
  }
}
</script>
<style lang="less">
  .login {
    // 让登陆按钮居中
    .btn-wrap {
      padding:20px;
      .btn {
        width: 100%;
        background-color: #6db4fb;
        color: #fff;
      }
    }
  }
</style>
